const $ = layui.$;
export default class AddStudent{
    constructor(data){
        this.render();
        this.handle(data);
    }
    render(){
        let template = `
        <form class="layui-form" lay-filter="updateForm">
        <div class="layui-form-item">
          <label class="layui-form-label">姓名</label>
          <div class="layui-input-block">
            <input
              type="text"
              name="name"
              required
              lay-verify="required"
              placeholder="请输入姓名"
              autocomplete="off"
              class="layui-input"
            />
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">年龄</label>
          <div class="layui-input-block">
            <input
              type="text"
              name="age"
              required
              lay-verify="required"
              placeholder="请输入年龄"
              autocomplete="off"
              class="layui-input"
            />
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">性别</label>
          <div class="layui-input-block">
              <input type="radio" name="gender" value="男" title="男">
              <input type="radio" name="gender" value="女" title="女">
          </div>
        </div>
        <input type="hidden" id="updateStudentId" name="_id">
        </form>
        `;
        $("#updateStudentTemplate").html(template);
    }
    handle(data){
        let form = layui.form;
        // 弹出修改学生的窗口
        layer.open({
            type: 1,
            title: "修改学生", //不显示标题栏
            area: "300px;",
            shade: 0.6,
            id: "LAY_layuipro", //设定一个id，防止重复弹出
            btn: ["确认", "取消"],
            btnAlign: "c",
            moveType: 1, //拖拽模式，0或者1
            content: $("#updateStudentTemplate").html(),
            yes() {
              $.ajax({
                type: "put",
                url: "/api/students/" + $("#updateStudentId").val(),
                data: form.val("updateForm"),
                success() {
                  table.reload("studentTable");
                },
              });
              layer.closeAll();
            },
            success: function (layero) {
              // 根据id查询要修改的学生信息，并将学生信息填充到对应的表单项中
              $.ajax({
                type: "get",
                url: "/api/students/" + data._id,
                success(student) {
                  form.val("updateForm", student);
                  form.render();
                },
              });
            },
          });
    }
}